<template>
    <div id="cssLayout">
        <el-row :gutter="10">
            <el-col :span="24">
                <el-card class="box-card">
                    <template #header>
                        <div class="card-header">
                            <span>flex布局</span>
                        </div>
                    </template>
                    <el-row :gutter="10">
                        <el-col :span="24">
                            <Flex></Flex>
                        </el-col>
                        <el-divider />
                        <el-col :span="24">
                            <flexDirection></flexDirection>
                        </el-col>
                        <el-divider />
                        <el-col :span="24">
                            <flexWrap></flexWrap>
                        </el-col>
                        <el-divider />
                        <el-col :span="24">
                            <justifyContent></justifyContent>
                        </el-col>
                        <el-divider />
                        <el-col :span="24">
                            <alignItems></alignItems>
                        </el-col>
                        <el-divider />
                        <el-col :span="24">
                            <alignContent></alignContent>
                        </el-col>
                        <el-divider border-style="dashed" />
                        <el-col :span="24">
                            <flexGrow></flexGrow>
                        </el-col>
                        <el-divider border-style="dashed" />
                        <el-col :span="24">
                            <flexShrink></flexShrink>
                        </el-col>
                        <el-divider border-style="dashed" />
                        <el-col :span="24">
                            <flexChild></flexChild>
                        </el-col>
                        <el-divider border-style="dashed" />
                        <el-col :span="24">
                            <alginSelf></alginSelf>
                        </el-col>
                        <el-divider border-style="dashed" />
                        <el-col :span="24">
                            <flexOrder></flexOrder>
                        </el-col>
                    </el-row>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>
<script setup >
import Flex from "../../components/flex/flex.vue"
import flexDirection from "../../components/flex/flexDirection.vue"
import flexWrap from "../../components/flex/flexWrap.vue"
import justifyContent from "../../components/flex/justifyContent.vue"
import alignItems from "../../components/flex/alignItems.vue"
import alignContent from "../../components/flex/alignContent.vue"
import flexGrow from "../../components/flex/flexGrow.vue"
import flexShrink from "../../components/flex/flexShrink.vue"
import flexChild from "../../components/flex/flexChild.vue"
import alginSelf from "../../components/flex/alginSelf.vue"
import flexOrder from "../../components/flex/flexOrder.vue"
</script>
<style scoped lang="scss">
.el-row{
    height: 750px;
    overflow: auto;
}
.el-row::-webkit-scrollbar{
    width: 0;
}
</style>